<template>
    <div>
       <img :src="img" class="web-banner">
       
       <div class="web-home-total">
        <ul>
          <li>
            <img :src="img1">
            <div class="web-home-flex">
              <h3>成交额</h3>
              <label>{{count.bidMoney/100}}元</label>
            </div>
          </li>
          <li>
           <img :src="img2">
           <div class="web-home-flex">
             <h3>成交笔数</h3>
             <label>{{count.bidNum}}笔</label>
           </div>
         </li>
         <li>
           <img :src="img3">
           <div class="web-home-flex">
             <h3>供应商</h3>
             <label>{{count.supplierNum}}家</label>
           </div>
         </li>
         <li>
           <img :src="img4">
           <div class="web-home-flex">
             <h3>供应商品</h3>
             <label>{{count.goodsNum}}件</label>
           </div>
         </li>
        </ul>
       </div>

       <!-- <div class="notice-border clearfix">
          <div class="notice-left"><i class="el-icon-bell"></i></div>
          <div class="notice-centent">
            <marquee onmouseout="this.start()" onmouseover="this.stop()" scrollamount="1" scrolldelay="10">
              {{content}}
            </marquee>
         </div>
        </div> -->

        <div class="web-home-noect">
          <div class="web-home-noect-inner">
            <div class="wow">
              <span>Group news</span>
              <h3>集团新闻</h3>
            </div>
            <template v-if="newsList.length >= 1">
              <el-carousel :interval="1115000" type="card" height="250px" indicator-position="none">
                <el-carousel-item v-for="item in newsList" :key="item.id">
                  <div class="web-home-news-item">
                    <img :src="item.coverImage">
                    <div class="web-home-news-inner">
                      <h4>{{ item.title }}</h4>
                      <el-button style="width: 200px;" @click="detailsNewsClick(item.id)" round>详情</el-button>
                      <span>发布时间：{{item.createTime | ellipsis}}</span>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </template>
            <el-empty v-if="newsList.length === 0" :image-size="200"></el-empty>
          </div>
         </div>
       
       <div class="web-home-mian-purchase">
        <div class="web-home-purchase">
          <div class="wow">
            <span>Enterprise custorniation</span>
            <h3>企业定制</h3>
          </div>
          <ul class="web-home-puchase-ul">
            <li>
              <dl class="web-home-puchase-dl">
                <dt><label><img :src="img5">询价采购</label><el-button @click="more(1)" type="text">更多</el-button></dt>
                <dd v-for="item in inquiryList" :key="item.id">
                  <label>{{item.name}}</label>
                  <span>{{item.winningTime | ellipsis}}</span>
                </dd>
                <el-empty v-if="inquiryList.length === 0" :image-size="100"></el-empty>
              </dl>
            </li>
            <li>
              <dl class="web-home-puchase-dl">
                <dt><label><img :src="img6">邀请采购</label><el-button @click="more(2)" type="text">更多</el-button></dt>
                <dd v-for="item in invitationList">
                  <label>{{item.name}}</label>
                  <span>{{item.winningTime | ellipsis}}</span>
                </dd>
                <el-empty v-if="invitationList.length === 0" :image-size="100"></el-empty>
              </dl>
            </li>
            <li>
              <dl class="web-home-puchase-dl">
                <dt><label><img :src="img7">公开采购</label><el-button @click="more(3)" type="text">更多</el-button></dt>
                <dd v-for="item in overtList">
                  <label>{{item.name}}</label>
                  <span>{{item.winningTime | ellipsis}}</span>
                </dd>
                <el-empty v-if="overtList.length === 0" :image-size="100"></el-empty>
              </dl>
            </li>
          </ul>
        </div>
      </div>

       <div class="web-home-noect">
        <div class="web-home-noect-inner">
          <div class="wow">
            <span>Transaction announcement</span>
            <h3>成交公告</h3>
          </div>
          <template v-if="noetsList.length >= 1">
            <el-carousel :interval="5000" type="card" height="250px" indicator-position="none">
              <el-carousel-item v-for="item in noetsList" :key="item.id">
                <h3 class="medium-centent">{{ item.name }}</h3>
                <el-button style="width: 200px;" @click="detailsClick(item.id)" round>详情</el-button>
                <label class="medium-time">公告时间：{{item.winningTime | ellipsis}}</label>
              </el-carousel-item>
            </el-carousel>
          </template>
          <el-empty v-if="noetsList.length === 0" :image-size="200"></el-empty>
        </div>
       </div>

       <el-dialog title="中标信息" :visible.sync="visible" width="1200px">
          <table class="custom-table" style="margin-bottom:10px">
            <tr>
              <td colspan="4">发布时间：{{details.gsTime | ellipsis}}</td>
          </tr>
          <tr>
            <td class="tr-title">项目名称</td><td>{{details.name}}</td>
            <td class="tr-title">采购单号</td><td>{{details.purchaseCode}}</td>
          </tr>
          <tr>
            <td class="tr-title">采购商</td><td>{{details.dept?details.dept.unitName:''}}</td>
            <td class="tr-title">供应商</td><td>{{details.winningSupplierName | substringsis}}</td>
          </tr>
        </table>
        <template v-if="details.projectType === '1'">
          <el-table :data="details.purchaseGoodsDetail" style="width: 100%;" stripe>
            <el-table-column prop="name" label="物资名称"></el-table-column>
            <el-table-column prop="unit" label="单位"></el-table-column>
            <el-table-column prop="purchasedNum" label="采购数量"></el-table-column>
          </el-table>
        </template>
        <template v-if="details.projectType === '2'">
          <el-table :data="details.purchaseGoodsDetail" style="width: 100%;" stripe>
            <el-table-column prop="name" label="劳务名称"></el-table-column>
            <el-table-column prop="purchasedNum" label="采购数量"></el-table-column>
            <el-table-column prop="remarks" label="备注"></el-table-column>
          </el-table>
        </template>
      </el-dialog>
       
    </div>
  </template>
  <script>
  import { getWebHomeCount, getWebBidList, getWebBidDetails, getNewsList } from "@/api/web_api"
   import { getDetailByKey} from "@/api/about_api";
  import moment from 'moment'
  import { ACCESS_TOKEN } from "@/config/common"
  import banner_img from "@/assets/home_banner.jpg"
  import home_img1 from "@/assets/chengjiao.png"
  import home_img2 from "@/assets/cjbs.png"
  import home_img3 from "@/assets/gys.png"
  import home_img4 from "@/assets/gysp.png"
  import home_img5 from "@/assets/gkzb.png"
  import home_img6 from "@/assets/xjcg.png"
  import home_img7 from "@/assets/yqzb.png"
  export default {
    name:"home",
    data() {
      return {
        img:banner_img,
        img1:home_img1,
        img2:home_img2,
        img3:home_img3,
        img4:home_img4,
        img5:home_img5,
        img6:home_img6,
        img7:home_img7,
        count:{
          bidMoney: 0,
          bidNum: 0,
          goodsNum: 0,
	        supplierNum: 0
        },
        inquiryList:[],
        invitationList:[],
        overtList:[],
        noetsList:[],
        newsList:[],
        visible:false,
        content:'欢迎您访问xxxx集团股份有限公司!系统升级中，敬请期待',
        details:{}
      };
    },
    filters: {
      ellipsis (value) {
        if (!value) {
          return ''
        }
        return moment(value).format("YYYY-MM-DD")
      },
      substringsis(val){
        if (!val) {
          return ''
        }
        return "*******公司";//+val.substr(0,2) 
      }
    },
    mounted() {
      // let hasToken = sessionStorage.getItem(ACCESS_TOKEN);
      // if(hasToken){
      //   this.getCount();
      //   this.getinquiryList();
      //   this.getinvitationList();
      //   this.getovertList();
      //   this.getnoetsList();
      // }else{
      //  this.clear();
      // }
      // this.getNewsLists();
      this.getLogo()
    },
    methods: {
      async getLogo() {
        const { code, data } = await getDetailByKey('homebanner');
            if (code === 200) { 
                if (data) {
                  if (data.value) {
                    let result = JSON.parse(data.value)
                        
                       this.img = result[0].url
                    } else {
                      this.img = banner_img
                    }
                } else {
                  this.img = banner_img
                }
            }
      },
      clear(){
        this.count = {
          bidMoney: 0,
          bidNum: 0,
          goodsNum: 0,
	        supplierNum: 0
        },
        this.inquiryList = [];
        this.invitationList = [];
        this.overtList = [];
        this.noetsList = [];
      },
      async getCount(){
        const {code,data} = await getWebHomeCount();
        if(code === 200){
          this.count = data;
        }else{
          this.count = {
            bidMoney: 0,
            bidNum: 0,
            goodsNum: 0,
            supplierNum: 0
          }
        }
      },
      async getNewsLists(){
        const params = {pageNum:1,pageSize:10,statusFlag:"1"};//1.开启 0.关闭 
        const {code,data} = await getNewsList(params);
        if(code === 200){
          this.newsList = data.list;
        }else{
          this.newsList = [];
        }
      },
      async getinquiryList(){
        let params = {};
        params.pageSize = 6;
        params.pageNum = 1;
        params.bidType = 1;//招标方式 1.询价采购招标 2.邀请招标 3.公开招标
        //params.gsFlag = 0;//是否公示 1.是 0.否,示例值(1)
        const {code,data} = await getWebBidList(params);
        if(code === 200){
          this.inquiryList = data.list;
        }else{
          this.inquiryList = [];
        }
      },
      async getinvitationList(){
        let params = {};
        params.pageSize = 6;
        params.pageNum = 1;
        params.bidType = 2;//招标方式 1.询价采购招标 2.邀请招标 3.公开招标
        //params.gsFlag = 0;//是否公示 1.是 0.否,示例值(1)
        const {code,data} = await getWebBidList(params);
        if(code === 200){
          this.invitationList = data.list;
        }else{
          this.invitationList = [];
        }
      },
      async getovertList(){
        let params = {};
        params.pageSize = 6;
        params.pageNum = 1;
        params.bidType = 3;//招标方式 1.询价采购招标 2.邀请招标 3.公开招标
        //params.gsFlag = 0;//是否公示 1.是 0.否,示例值(1)
        const {code,data} = await getWebBidList(params);
        if(code === 200){
          this.overtList = data.list;
        }else{
          this.overtList = [];
        }
      },
      async getnoetsList(){
        let params = {};
        params.pageSize = 6;
        params.pageNum = 1;
        //params.bidType = 3;//招标方式 1.询价采购招标 2.邀请招标 3.公开招标
        params.gsFlag = 1;//是否公示 1.是 0.否
        const {code,data} = await getWebBidList(params);
        if(code === 200){
          this.noetsList = data.list;
        }else{
          this.noetsList = [];
        }
      },
      more(type){
        if(type===1){
          this.$router.push('/web/inquiry');
        }else if(type===2){
          this.$router.push('/web/invitation');
        }else if(type===3){
          this.$router.push('/web/overt');
        }
      },
      async detailsClick(id){
       const {code,data} = await getWebBidDetails(id);
       if(code === 200){
          data.purchaseGoodsDetail = data.purchaseGoodsDetail === '' ? []:JSON.parse(data.purchaseGoodsDetail);
          this.details = data;
          this.visible =true;
       }
      },
      detailsNewsClick(id){
        this.$router.push({
            path:'/web/newsDetails',
            query: {   
                id: id
            } 
        });
      }
    }
  };
  </script>
<style scoped>
 .web-home-puchase-dl > dt label{
  display: flex;
  align-items: center;
}
</style>